<template>
    <div>
        <ul>
            <li :class="nowCur === i ? 'active' : ''" v-for="(item, i) in imgs" :key="i" @click="selectImg(i, item)">
                <img :src="item" alt="">
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: '',
    props: {
        cur: {
            default: null
        }
    },
    data() { 
        return {
            imgs: [
                require('@/assets/images/img1.jpg'),
                require('@/assets/images/img2.jpg'),
                require('@/assets/images/img3.jpg'),
                require('@/assets/images/img4.jpg'),
                require('@/assets/images/img5.jpg')
            ],

            nowCur: null
        }
    },
    created() {

    },
    methods:{
        selectImg(i, item) {
            this.nowCur = i
            this.$emit('getimg', {
                img: item,
                cur: this.nowCur
            })
        }
    },

    watch: {
        cur() {
            this.nowCur = this.cur
        }
    }
}
</script>

<style scoped>
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;}
ul li {
    width: 70px;
    height: 70px;
    margin-left: 10px;
}
ul .active {
border: 4px solid red;}
img {
display: block;
width: 100%;
height: 100%;}
</style>